<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link href="" rel="icon" type="image/x-icon" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>esp-rfid</title>
    <!-- Bootstrap core CSS -->
    <link href="css/required.css" rel="stylesheet">
    <style>
        #openinghours th {
            text-align: center;
        }
        #openinghours td {
            padding: 2px;
        }
        #openinghours td:nth-child(2n), #openinghours th:nth-child(2n) {
            background-color: #bbb;
        }
    </style>>
</head>

<body>
    <div class="wrapper">
        <!-- Sidebar Holder -->
        <nav id="sidebar">
            <div id="dismiss">
                <i class="glyphicon glyphicon-arrow-left"></i>
            </div>
            <div class="sidebar-header">
                <br>
                <h1><i class="glyphicon glyphicon-tags" aria-hidden="true"></i>esp-rfid</h1>
                <div id="systemname" class="text-center"></div>
            </div>
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#" id="status"><i class="glyphicon glyphicon-home"></i>Status</a>
                </li>
                <li>
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false"><i  class="glyphicon glyphicon-cog"></i>Settings</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#" id="network"><i class="glyphicon glyphicon-signal"></i>Wireless Network</a>
                        </li>
                        <li>
                            <a href="#" id="hardware"><i class="glyphicon glyphicon-wrench"></i>Hardware Settings</a>
                        </li>
                        <li>
                            <a href="#" id="general"><i class="glyphicon glyphicon-list-alt"></i>General Settings</a>
                        </li>
                        <li>
                            <a href="#" id="mqtt"><i class="glyphicon glyphicon-link"></i>MQTT Settings</a>
                        </li>
                        <li>
                            <a href="#" id="ntp"><i class="glyphicon glyphicon-hourglass"></i>NTP (Time) Settings</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" id="users"><i  class="glyphicon glyphicon-user"></i>Users</a>
                </li>
                <li>
                    <a href="#logsSubmenu" data-toggle="collapse" aria-expanded="false"><i  class="glyphicon glyphicon-folder-open"></i>Logs</a>
                    <ul class="collapse list-unstyled" id="logsSubmenu">
                        <li>
                            <a href="#" id="latestlog"><i  class="glyphicon glyphicon-calendar"></i>Access Log</a>
                        </li>
                        <li>
                            <a href="#" id="eventlog"><i  class="glyphicon glyphicon-transfer"></i>Event Log</a>
                        </li>
                        <li>
                            <a href="#" id="logmaintenance"><i  class="glyphicon glyphicon-wrench"></i>Logfile Maintenance</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <li>
                        <a href="#" id="backup"><i class="glyphicon glyphicon-floppy-disk"></i>Backup & Restore</a>
                    </li>
                    <li>
                        <a href="#" id="reset"><i class="glyphicon glyphicon-repeat"></i>Factory Reset</a>
                    </li>
                    <li>
                        <a data-toggle="modal" href="#update"><i class="glyphicon glyphicon-open"></i>Update</a>
                    </li>
            </ul>
            <ul class="list-unstyled CTAs">
                <li>
                    <a href="https://github.com/esprfid/esp-rfid" class="download">Project's GitHub Page</a>
                </li>
                <li>
                    <a href="https://salt.bountysource.com/checkout/amount?team=esp-rfid" class="download" aria-hidden="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Nothing says better thank you than a donation."><i class="glyphicon glyphicon-euro"></i>Donate</a>
                </li>
                <li>
                    <a href="#" class="article" onclick="logout();">Logout</a>
                </li>
                <li>
                    <h6 id="mainver" class="text-center"></h6>
                </li>
            </ul>
        </nav>
        <!-- Page Content Holder -->
        <div id="content">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                <i class="glyphicon glyphicon-menu-hamburger"></i>
                <span>Menu</span>
            </button>
            <div class="pull-right" id="ws-connection-status">
                <div class="alert alert-warning" role="alert">
                    <i class="glyphicon glyphicon-warning-sign"></i>
                    <span>Connection with esp-rfid absent. Reconnecting...</span>
                </div>
            </div>
            <div id="ajaxcontent">
            </div>
            <div id="revcommit" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Please review changes</h4>
                        </div>
                        <div class="modal-body">
                            <pre id="jsonholder"></pre>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" onclick="commit();" class="btn btn-success" data-dismiss="modal">Save & Reboot</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="destroy" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Are you absolutely sure?</h4>
                        </div>
                        <div class="alert alert-warning">
                            <h5><strong>Warning!</strong> Unexpected bad things will happen if you don’t read this!</h5>
                        </div>
                        <div class="modal-body">
                            <h5>
                                This action <strong>cannot</strong> be undone. This will permanently delete <strong>all the user data, settings and logs.</strong> Please make sure you made a backup first.
                            </h5>
                            <div style="clear:both;">
                                <br>
                            </div>
                            <h5>Please type in the hostname of the device to confirm.</h5>
                            <div style="clear:both;">
                                <br>
                            </div>
                            <p>
                                <input type="text" class="form-control input-block" id="compare" oninput="compareDestroy()">
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button id="destroybtn" type="button" disabled="" onclick="destroy();" class="btn btn-block btn-danger">I understand the consequences.</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="signin" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Please Sign In</h4>
                        </div>
                        <div class="row">
                            <br>
                            <div class="col-md-8 col-md-offset-2">
                                <div class="login-panel panel panel-default">
                                    <div class="panel-body">
                                        <form role="form" onsubmit="login(); return false">
                                            <fieldset>
                                                <div class="form-group">
                                                    <input id="password" class="form-control" placeholder="Password" name="password" type="password" value="" required="" title="Please enter your password">
                                                </div>
                                                <button type="submit" class="btn btn-success btn-md pull-right">Login</button>
                                            </fieldset>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="update" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Update Firmware</h4>
                        </div>
                        <div class="alert alert-warning">
                            <strong>Warning!</strong> Please make sure you made a backup first
                        </div>
                        <div class="modal-body">
                            <div>
                                <h4>Latest Version Online</h4>
                                <div id="onlineupdate">
                                    <h5 id=releasehead></h5>
                                    <div style="clear:both;">
                                        <br>
                                    </div>
                                    <!-- <pre id="releasebody">Getting update information from GitHub...</pre> -->
                                    <div class="pull-right">
                                        <a class="pull-right" id="downloadupdate">
                                            <button type="button" class="btn btn-primary">Download</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div style="clear:both;">
                                <br>
                            </div>
                            <div>
                                <h4>Current Version:</h4>
                                <h5 id="versionhead"></h5>
                                <div class="form-group">
                                    <input id="binform" onchange="allowUpload();" type="file" name="update" accept=".bin">
                                </div>
                                <div class="pull-right">
                                    <button onclick="upload();" class="btn btn-primary" id="upbtn" disabled="">Update</button>
                                </div>
                            </div>
                        </div>
                        <div style="clear:both;">
                            <br>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div id="commit" class="container">
                <h6 class="text-muted">esp-rfid - This is a <a href="https://github.com/esprfid/esp-rfid/blob/stable/LICENSE">free</a> software.</h6>
            </div>
        </footer>
        <div class="overlay"></div>
        <script src="js/required.js"></script>
        <script src="js/esprfid.js"></script>
        <script>start();</script>
</body>

</html>